<template>
	<view class="wrap">
		<view class="banner_wrap" :style="`background: linear-gradient(${ background || '#006C00' } 50%, #fff)`">
			<swiper :current="current" indicator-dots autoplay circular indicator-color="#a7a7a7"
				indicator-active-color="#fff" @change="changeSwiper">
				<swiper-item v-for="item in bannerList" :key="item.id">
					<image :src="item.imageUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
	</view>

</template>

<script>
	export default {
		name: "l-banner",
		props: {
			bannerList: {
				type: Array,
				default: () => {
					return [{
						id: 1,
						imageUrl: '/static/images/banner2.jpg',
						background: '#006C00'
					}, {
						id: 2,
						imageUrl: '/static/images/banner1.jpg',
						background: '#45328c'
					}, {
						id: 3,
						imageUrl: '/static/images/banner3.jpg',
						background: '#0072B7'
					}]
				}
			}
		},
		data() {
			return {
				current: 0,
				background: ''
			};
		},
		methods: {
			// 轮播图切换
			changeSwiper(e) {
				this.background = this.bannerList[e.detail.current].background
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner_wrap {
		height: 400rpx;
		padding: 120rpx 0 0;
		/* #ifdef APP-PLUS */
		padding-top: calc(120rpx + var(--status-bar-height));
		/* #endif */
		box-sizing: content-box;

		swiper {
			height: 100%;
			padding: 0 20rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}
</style>
